<template>
  <div class="dy-main accountCardDetail">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true" :left-options="{preventGoBack:true}" @on-click-back="back">卡片详情</x-header>
    </div>
    <div class="dy-body">
      <zx-cardS :cardLNo="cardNo"></zx-cardS>
      <tab active-color="#f28300" bar-active-color="#f28300" class="tab-select">
        <tab-item v-for="(item, index) in accCurrencyArr" :key="index" :selected="index===0" @on-item-click="tabText = item">{{item}}</tab-item>
      </tab>
      <div v-for="(item, index) in accDataWithCurrency[tabText]" :key="index">
        <group gutter=".2rem" v-if="item.depositType === '活期'">
          <cell title="活期结算账户" class="bold"></cell>
          <cell title="账面余额" :value="item.ledgerBal"></cell>
          <cell title="可用余额" :value="item.actualBal"></cell>
        </group>
        <!--<group gutter=".2rem">-->
          <!--<cell title="人民币境外汇入款活期账户" class="bold"></cell>-->
          <!--<cell title="账面余额" :value="item.ledgerBal" class="cell"></cell>-->
          <!--<cell title="可用余额" :value="item.actualBal" class="cell"></cell>-->
        <!--</group>-->
        <group gutter=".2rem" v-if="item.depositType === '定期'">
          <cell title="定期存款账户" is-link
                :border-intent="false"
                value="200.000.00"
                :arrow-direction="showContent ? 'up' : 'down'"
                class="bold"
                @click.native="showContent = !showContent">
          </cell>
          <template v-if="showContent">
            <cell :title="`存单号：${item.certNo}`" :value="item.certAmount" class="sub-item" is-link></cell>
          </template>
        </group>
        <!--<group gutter=".2rem">-->
          <!--<cell title="人民币境外汇入款定期账户" is-link-->
                <!--:border-intent="false"-->
                <!--value="200.000.00"-->
                <!--:arrow-direction="showContent ? 'up' : 'down'"-->
                <!--class="bold"-->
                <!--@click.native="showContent = !showContent">-->
          <!--</cell>-->
          <!--<template v-if="showContent">-->
            <!--<cell :title="`存单号：${item.certNo}`" value="50.000.00" class="sub-item" is-link></cell>-->
          <!--</template>-->
        <!--</group>-->
      </div>
      <group gutter=".2rem">
        <cell title="定活互转" value="" is-link @click.native="goTo('PeriodChange_Index')"></cell>
        <cell title="交易明细" value="" is-link @click.native="goTo('AccountTranDetail')"></cell>
        <!--<cell title="动账通知" value="" class="cell" is-link @click.native="goTo('MovingAccountInfoDetail')"></cell>-->
        <x-switch title="卡片锁定/解锁" v-model="lockCard" class="cell-switch" @on-change="lockCardFun"></x-switch>
        <x-switch title="设置默认卡片" v-model="defaultCard" class="cell-switch"></x-switch>
        <cell title="卡片挂失" value="" is-link  class="cell"></cell>
      </group>
      <div class="confirm">
        <x-button action-type="button" @click.native="tipsShow = true">删除卡片</x-button>
      </div>
      <zx-dialog v-model="tipsShow" title="警告" type="tips" butType="choose" :data="['取消', '确认']" @on-click-no="tipsShow = false" @on-click-yes="clickYes">
        <div slot="body" class="tips">
          删除后将不能用此卡片在手机端进行相关交易，需重新加挂卡片。您确定要删除吗？
        </div>
      </zx-dialog>
      <zx-dialog v-model="tipsShow2" title="警告" type="tips" butType="choose" :data="['取消', '确认']" @on-click-no="tipsShow2 = false">
        <div slot="body" class="tips">
          确定要锁定卡片吗？
        </div>
      </zx-dialog>
      <toast v-model="toastShow" text="删除成功"></toast>
    </div>
  </div>
</template>

<script>

export default{
  data () {
    return {
      cardNo: '', // 传过来的卡号
      clientdNo: '', // 传过来的客户号
      accountData: {
        status: '', // 卡状态 表示正常、挂失、销卡等状态
        category: '', // 账户类别 Ⅰ类银行账户,Ⅱ类银行账户,Ⅲ类银行账户
        arrays: [{
          subAcctNo: '6210 **** **** 0476', // 子账户
          subAcctType: '理财卡/默认卡', // 子账户类型
          depositType: 'S', // 存款类型 C-往来，S-储蓄，T-定期，A-AIO
          currency: '人民币', // 币种
          ledgerBal: '69.00', // 账面余额
          actualBal: '69.00', // 可用余额
          chaoActualBal: '', // 钞实际余额 (待定)
          chaoLedgerBal: '', // 钞账面余额 (待定)
          huiActualBal: '', // 汇实际余额 (待定)
          huiLedgerBal: '', // 汇账面余额 (待定)
          certNo: '', // 存单号 (定期)
          certAmount: '', // 存单金额 (定期)
          deadline: '' // 到期期限 (定期)
        }]
      },
      accCurrencyArr: [], // 币种去重数组
      accDataWithCurrency: {}, // 根据币种重调对象
      lockCard: false, // 卡片锁定/解锁
      defaultCard: false, // 设置默认卡片
      showPositionValue: false, // toast显示
      tipsShow: false, // 弹框显示
      tipsShow2: false, // 卡片锁定弹框
      showContent: true, // 定期列表显示开关
      tabText: '人民币',
      toastShow: false
    }
  },
  methods: {
    /**
     *返回
     *
     **/
    back () {
      this.$publicFun.goBack(this)
    },
    /**
     *cell跳转页面
     *
     **/
    goTo (page) {
      if (page === 'PeriodChange_Index') {
        this.$router.push({name: page, query: {'cardNo': this.cardNo, 'currency': this.accountData.arrays.currency, 'actualBal': this.accountData.arrays.actualBal}})
      } else {
        this.$router.push({name: page})
      }
    },
    /**
     *预加载卡片详情
     *
     **/
    getData () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'queryAccountInfo', 'basic_Data': JSON.stringify({'cardNo': this.cardNo})}
        }),
        (response) => {
          let respData = JSON.parse(response).data
          console.log(respData)
          if (respData.head.respCode === '000000') { // 返回000000为正常，否则输出错误
            // this.getCurrency() // 获取币种列表
            // this.getAccDataWithCurrency()
          } else { // 调用原生提示，输出错误内容
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': respData.head.respMsg
            })
          }
        })
      // JSON.stringify({
      //   'requstSource': 'internetRequest',
      //   'url': 'mstep.do?act=business',
      //   'params': {'method_Name': 'CI004003_1', 'basic_Data': JSON.stringify({'cardNo': _this.$route.query.cardNo})}
      // }),
      // function (response) {
      //   // _this.ppp = response
      //   response = JSON.parse(response)
      //   // console.log(response)
      //   if (response.status === 0 || response.status === '0') {
      //     _this.accountData = response.data.data[0]
      //     _this.getCurrency() // 获取币种列表
      //     _this.getAccDataWithCurrency()
      //   } else {
      //     console.log('fail')
      //   }
      // })
    },
    /**
     *获取币种列表
     *
     **/
    getCurrency () {
      let arr = []
      this.accountData.arrays.map((item) => {
        arr.push(item.currency)
      })
      this.accCurrencyArr = Array.from(new Set(arr)) // 利用set数据结构去重
    },
    getAccDataWithCurrency () {
      let obj = {}
      this.accCurrencyArr.map((item) => {
        obj[item] = []
      })
      this.accountData.arrays.map((item) => {
        console.log(item.currency)
        let currency = item.currency
        for (let key in obj) {
          if (key === currency) {
            if (obj.hasOwnProperty(key)) {
              obj[key].push(item)
            }
          }
        }
      })
      this.accDataWithCurrency = obj
      console.log(JSON.stringify(this.accDataWithCurrency))
    },
    clickYes () { // 点击弹框中确定
      this.tipsShow = false
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'deleteCard', 'basic_Data': JSON.stringify({'clientNo': this.$store.getters.getClientNo, 'cardNo': '6229331700000037766'})}
        }),
        // JSON.stringify({
        //   'requstSource': 'internetRequest',
        //   'url': 'mstep.do?act=business',
        //   'params': {'method_Name': 'deleteCard', 'basic_Data': JSON.stringify({'cardNo': _this.cardNo, 'clientNo': _this.clientNo})}
        // }),
        (response) => {
          let respData = JSON.parse(response).data
          console.log(respData)
          if (respData.head.respCode === '000000') { // 返回000000为正常，否则输出错误
            this.toastShow = true
            setTimeout(() => {
              this.$publicFun.goBack(this, 'AccountManage')
            }, 2000)
          } else { // 调用原生提示，输出错误内容
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': respData.head.respMsg
            })
          }
        })
    },
    /**
     *卡片锁定弹窗
     *
     **/
    lockCardFun () {
      if (this.lockCard) {
        this.tipsShow2 = true
      }
    }
  },
  created () {
    this.cardNo = this.$route.query.cardNo
    this.getData()
  }
}
</script>
<style lang="less">
  .accountCardDetail {
    .dy-body {
      overflow: auto;
      .tab-select {
        .scrollable {
          padding-bottom: 0;
          .vux-tab-ink-bar {
            bottom: 0;
          }
        }
      }
      .actual-bal {
        margin: .32rem auto .1rem;
        color: #F28300;
        font-size: .6rem;
        text-align: center;
      }
      .notice {
        width:6.98rem;
        margin:0 auto;
        text-align: center;
        padding-bottom: .36rem;
        color: #9B9B9B;
        font-size: .24rem;
        border-bottom:.02rem solid #DBDBDB;
      }
      .basic-info {
        width: 100%;
        height: 1.2rem;
        padding: 0 .6rem;
        display: flex;
        justify-content:space-between;
        align-items: center;
        &>div {
          padding: .18rem auto .26rem;
          text-align: center;
          p {
            font-size: .32rem;
            color: #333333;
          }
          span {
            font-size: .24rem;
            color: #9b9b9b;
          }
        }
      }
      .confirm {
        margin: .8rem auto .62rem;
        padding: 0 .4rem;
        width: 100%;
      }
      .bold {
        .vux-label {
          font-weight: bold;
        }
      }
    }
  }
</style>
